<template>
    <div class="phoneComponent" v-if="oItem">
      <div class="head">
          <div class="title">
              <span class="text">{{oItem.title}}</span>
              <span class="required" v-if="oItem.required">*</span>
          </div>
          <div class="desc" v-if="oItem.desc">{{oItem.desc}}</div>
      </div>
      <div class="body">
          <el-input v-model="oItem.value" :placeholder="oItem.placeholder" :minlength="11" :maxlength="11" clearable></el-input>
      </div>
    </div>
</template>
<script>
  import Bus from "@/utils/bus";
export default {
    name: "phoneComponent",
    data() {
        return {
          pageName: "手机号组件",
          oItem: null
        }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
      if(this.item) {
          this.oItem = JSON.parse(this.item);
          const ename = this.oItem.ename;
          const id = this.oItem.id;
          Bus.$on(`${ename}${id}`, (params)=>{
            if(params.required !== undefined ) {
               this.oItem.required = params.required;
            }
            if(params.title !== undefined ) {
               this.oItem.title = params.title;
            }
            if(params.desc !== undefined ) {
               this.oItem.desc = params.desc;
            }
            if(params.placeholder !== undefined ) {
               this.oItem.placeholder = params.placeholder;
            }
          })
      }
    },
    methods: {},
    computed: {},
    watch: {},
}
</script>
<style scoped lang="scss">
.phoneComponent{  width:100%;margin-bottom:20px;
    padding:0 15px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    .head{display:flex; width:100%; flex-direction:column; margin-bottom:10px;
        .title{width:100%;margin-bottom:5px;
            .text{color:#333;margin-right: 5px; word-break: break-all;}
            .required{color:red; position: relative; top:3px;}
        }
        .desc{font-size:12px;color:#999;line-height:20px; word-break: break-all;}
    }
    .body{display:flex;

    }}
</style>
